<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The Last Of Us</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
      html{
        background: url(http://www.3dmgame.com/uploads/allimg/130621/180_130621025657_1.jpg);
      }
      body{
        width: 960px;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div class="well">
      <h3>Add a template</h3>
      <form role="form" id="form1">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" class="form-control" id="name" placeholder="Template Name">
        </div>
        <div class="form-group">
          <label for="thumbnail">Thumbnail</label>
          <input type="text" name="thumbnail" class="form-control" id="thumbnail" placeholder="Template Thumbnail">
        </div>
        <div class="form-group">
          <label for="content">Content</label>
          <textarea class="form-control" id="content" name="content" rows="4" placeholder="Template Content"></textarea>
        </div>
        <button type="submit" class="btn btn-default" id="btn1">Submit</button>
      </form>
    </div>
    <div class="well">
      <h3>Delete a template</h3>
      <form role="form" id="form2">
        <div class="form-group">
          <label for="id">Id</label>
          <input type="text" name="id" class="form-control" id="id" placeholder="Template ID">
        </div>
        <button type="submit" class="btn btn-danger" id="btn2">Submit</button>
      </form>
    </div>
    <script type="text/javascript" src="http://img3.cache.netease.com/utf8/xocean/libs/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
      $('#content').focus(function(){
        $(this).val('')
      })
      $('#btn1').click(function(e){

        e.preventDefault();
        $.ajax({
          type: 'post',
          url: '/quickspecial/manage.do?target=template&action=saveTemplate',
          dataType: 'json',
          data: {
            name: $('#name').val(),
            thumbnail: $('#thumbnail').val(),
            content: $('#content').val()
          },
          success: function(data){
            if(data.result == 1){
              alert('Done!');
            }else{
              alert('Fail!');
            }
          }
        })
      });
      $('#btn2').click(function(e){
        e.preventDefault();
        $.ajax({
          type: 'get',
          url: '/quickspecial/manage.do?target=template&action=delTemplateById',
          dataType: 'json',
          data: {
            id: $('#id').val()
          },
          success: function(data){
            if(data.result == 1){
              alert('Done!');
            }else{
              alert('Fail!');
            }
          }
        })
      });
    </script>
  </body>
</html>